<template>
  <div>
    <el-card>
      <el-button type="primary" @click="handleAdd">新增分类</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="name"
          label="分类名称"
        >
        </el-table-column>
        <el-table-column
          prop="img"
          label="分类图片"
        >
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.img!==null"
              style="width: 50px;height: 50px"
              :src="scope.row.img"
              fit="contain"
            >
            </el-image>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <create ref="create" @Ok="handleInit"></create>
    <edit ref="edit" @Ok="handleInit"></edit>
  </div>
</template>

<script>
  import Create from './components/create'
  import Edit from './components/edit'
  import {getList, deleteClassify} from "@/api/classify";

  export default {
    name: "index",
    components: {
      Create,
      Edit
    },
    data() {
      return {
        tableData: []
      }
    },
    mounted() {
      this.handleInit()
    },
    methods: {
      handleInit() {
        getList().then(res => {
          this.tableData = res.result
        });
      },
      handleAdd() {
        this.$refs['create'].show()
      },
      handleDelete(id) {
        deleteClassify({"id": id}).then(res => {
          if (res.status === 200) {
            this.$message.success("删除成功")
            this.handleInit();
          }
        })
      },
      handleEdit(id) {
        this.$refs['edit'].show(id)
      }
    }
  }
</script>

<style scoped>
  .bjcolor {
    width: 50px;
    height: 50px;
  }
</style>
